<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：简洁右侧栏客服代码</title>
        <meta name="keywords" content="在线客服,客服代码" />
        <meta name="description" content="今天介绍一款客服代码，主要功能有微信、QQ、电话显示及返回顶部功能。" />
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <style>
            body{height:2000px;}
            #service{width:161px;height:290px;position:fixed;top:350px;right:0px; z-index:100;}
            *html #service{margin-top:258px;position:absolute;top:expression(eval(document.documentElement.scrollTop));}
            #service li{width:161px;height:60px;}
            #service li img{float:right;}
            #service li a{height:49px;float:right;display:block;min-width:47px;max-width:161px;}
            #service li a .shows{display:block;}
            #service li a .hides{margin-right:-143px;cursor:pointer;cursor:hand;}
            #service li a.weixin_area .hides{display:none;position:absolute;right:143px;}
            #service li a.weixin_area .weixin{display:none;position:absolute;right:0;top:48px}
            #p2{width:112px;background-color:#A7D2A9;height:47px;margin-left:47px;border:1px solid #8BC48D;text-align:center;line-height:47px}
            #p3{width:112px;background-color:#EC9890;height:47px;margin-left:47px;border:1px solid #E6776C;text-align:center;line-height:47px}
            #p1{width:47px;height:49px;float:left}
            a:hover{text-decoration: none}

        </style>
    </head>
    <body>
        <div class="container">
            <div class="demo">
                <h2 class="title">教程：简洁右侧栏客服代码</h2>
                <p class="notice"><b>提示：</b>看右侧悬浮层，鼠标移动上去有效果。</p>
                <div id="service">
                    <ul>
                        <li>
                            <a href="javascript:void(0)" class="weixin_area">
                                <img src="images/l02.png" width="47" height="49" class="shows" />
                                <img src="images/a.png" width="57" height="49" class="hides" />
                                <img src="images/weixin.jpg" width="145" class="weixin" style="display:none;margin:-100px 57px 0 0" />
                            </a>
                        </li>
                        <li>
                            <a href="http://wpa.qq.com/msgrd?v=3&uin=1668959220&site=qq&menu=yes" target="_blank">
                                <div class="hides" style="width:161px;display:none;" id="qq">
                                    <div class="hides" id="p1">
                                        <img src="images/ll04.png">
                                    </div>
                                    <div class="hides" id="p2"><span style="color:#FFF;font-size:13px">1668959220</span>
                                    </div>
                                </div>
                                <img src="images/l04.png" width="47" height="49" class="shows" />
                            </a>
                        </li>
                        <li id="tel">
                            <a href="javascript:void(0)">
                                <div class="hides" style="width:161px;display:none;" id="tels">
                                    <div class="hides" id="p1">
                                        <img src="images/ll05.png">
                                    </div>
                                    <div class="hides" id="p3"><span style="color:#FFF;font-size:12px">18064008959</span>
                                    </div>
                                </div>
                                <img src="images/l05.png" width="47" height="49" class="shows" />
                            </a>
                        </li>
                        <li id="btn">
                            <a id="top_btn">
                                <div class="hides" style="width:161px;display:none">
                                    <img src="images/ll06.png" width="161" height="49" />
                                </div>
                                <img src="images/l06.png" width="47" height="49" class="shows" />
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="foot">
           
        </div>
        <script type="text/javascript" src="js/jquery.min.js"></script> 
        <script type="text/javascript">
            $(function() {
                $("#service a").hover(function() {
                    if ($(this).prop("className") == "weixin_area") {
                        $(this).children("img.hides").show();
                    } else {
                        $(this).children("div.hides").show();
                        $(this).children("img.shows").hide();
                        $(this).children("div.hides").animate({marginRight: '0px'}, '0');
                    }
                }, function() {
                    if ($(this).prop("className") == "weixin_area") {
                        $(this).children("img.hides").hide();
                    } else {
                        $(this).children("div.hides").animate({marginRight: '-163px'}, 0, function() {
                            $(this).hide();
                            $(this).next("img.shows").show();
                        });
                    }
                });

                $("#top_btn").click(function() {
                    $("html,body").animate({scrollTop: 0}, 600);
                });

                //右侧导航 - 二维码
                $(".weixin_area").hover(function() {
                    $(this).children(".weixin").show();
                },function(){
                    $(this).children(".weixin").hide();
                })
            });
        </script>
		<div style="text-align:center;">
<p>说明：该模块可以根据实际情况做增删，相对位置也可以按需调整</p>
</div>
    </body>
<script type="text/javascript" src="/public/js/footer.js"></script>
</html>
